<template>
    <div class="content">
        <p class="title">后台管理系统</p>
        <div class="menus">
            <div class="menus_left">
                <el-input
                    class="menus_left_search"
                    v-model="searchMenus"
                    placeholder="请搜索需要配置的权限"
                    prefix-icon="Search"
                />
                <div class="menus_left_list">
                    <!-- 搜索 -->
                    <div class="menus_left_list_title">
                        可添加的权限
                        <div class="menus_left_list_title_svg">
                            <li v-for="item in iconExample">
                                <SvgIcon
                                    :icon-class="item.iconName"
                                    width="17px"
                                    height="17px"
                                />
                                <span>{{ item.name }}</span>
                            </li>
                        </div>
                    </div>
                    <!-- 可选列表 -->
                    <div class="menus_left_list_content">
                        <menusSelectItem
                            v-if="menuList.length"
                            :searchMenus="searchMenus"
                            ref="menusSelect"
                            v-model:menuList="menuList"
                        ></menusSelectItem>
                    </div>
                </div>
            </div>

            <!-- 已选列表 -->
            <div class="menus_right">
                <div class="menus_right_title">
                    <span>已选{{ choosedList.length }}个权限</span>
                    <span @click="allReset" class="menus_right_title_close"
                        >清空</span
                    >
                </div>
                <div class="menus_right_list">
                    <p
                        v-for="item in choosedList"
                        @click="delChooseData(menuList, item)"
                    >
                        <span>{{ item.label }}</span>
                        <SvgIcon
                            icon-class="dialog_delect"
                            class="delect"
                        ></SvgIcon>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const searchMenus = ref("");
const menusSelect = ref();
const iconExample = [
    {
        name: "未选",
        iconName: "noneSelect",
    },
    {
        name: "部分选中",
        iconName: "partSelect",
    },
    {
        name: "全选",
        iconName: "allSelect",
    },
];
const menuList = defineModel("menuList", {
    type: Array,
    required: true,
    default: () => [] as any,
});

// 已选择数据列表
const choosedList = computed(() => {
    let arr = [] as any[];
    getchooseData(menuList.value, arr);
    return arr;
});

// 递归获取已选择数据
const getchooseData = (data: any, arr: any) => {
    data.forEach((ele: any) => {
        if (ele.children) {
            getchooseData(ele.children, arr);
        } else {
            if (ele.choosed) {
                let flag = arr.find((item: any) => {
                    return item.value === ele.value;
                });
                if (!flag) {
                    arr.push({
                        label: ele.label,
                        value: ele.value,
                    });
                }
            }
        }
    });
};

// 单个点击清除
const delChooseData = (data: any, flagItem: any) => {
    data.forEach((ele: any) => {
        if (ele.children) {
            delChooseData(ele.children, flagItem);
        } else {
            if (ele.choosed && ele.value === flagItem.value) {
                menusSelect.value.menuItemChoose(ele);
            }
        }
    });
};

// 清空
const allReset = () => {
    choosedList.value.forEach((ele: any) => {
        delChooseData(menuList.value, ele);
    });
};

defineExpose({ choosedList, allReset, menusSelect });
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    font-size: 14px;
    color: #222222;
    .title {
        font-size: 14px;
        color: #222222;
    }
    .menus {
        margin-top: 20px;
        width: 100%;
        display: flex;
        &_left {
            width: 530px;
            height: 361px;
            &_search {
                width: 100%;
                border-radius: 2px;
                height: 40px;
            }
            &_list {
                border: 1px solid #e5e5e5;
                margin-top: 10px;
                width: 100%;
                border-radius: 6px;
                height: 311px;
                &_title {
                    font-weight: 500;
                    font-size: 14px;
                    color: #222222;
                    line-height: 20px;
                    padding: 11px 16px;
                    background: #f9fdfe;
                    border-bottom: 1px solid #e5e5e5;
                    position: relative;

                    &_svg {
                        position: absolute;
                        right: 12px;
                        top: 50%;
                        transform: translate(0, -50%);
                        display: flex;
                        li {
                            display: flex;
                            align-items: center;
                            margin-left: 12px;
                            span {
                                margin-left: 3px;
                            }
                        }
                    }
                }
                &_content {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    width: 100%;
                    height: 100%;
                    padding: 23px 20px;
                    overflow-x: auto;
                    &_slide {
                        font-size: 14px;
                        flex-shrink: 0;
                        display: flex;
                        flex-direction: column;
                        width: 156px;
                        height: 225px;
                        overflow-y: scroll;
                        border-radius: 6px;
                        // border: 1px solid #e5e5e5;
                        .all_class {
                            margin-bottom: 25px;
                        }
                        li {
                            display: flex;
                            align-items: center;
                            width: 100%;
                            margin-bottom: 18px;
                            span {
                                margin-left: 8px;
                            }
                        }
                        :last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
        &_right {
            display: flex;
            flex-direction: column;
            margin-left: 14px;
            border: 1px solid #e5e5e5;
            border-radius: 6px;
            flex: 1;
            height: 361px;
            &_title {
                font-size: 14px;
                padding: 9px 14px;
                line-height: 20px;
                color: #222222;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #e5e5e5;
                border-radius: 6px;
                &_close {
                    color: #185dfe;
                    cursor: pointer;
                }
            }
            &_list {
                flex: 1;
                overflow-y: auto;
                padding: 21px 14px;
                p {
                    font-size: 14px;
                    width: 100%;
                    height: 30px;
                    line-height: 20px;
                    border-radius: 4px;
                    padding: 5px 16px;
                    background: #f9f9ff;
                    margin-top: 8px;
                    position: relative;
                    .delect {
                        cursor: pointer;
                        position: absolute;
                        width: 12px;
                        height: 12px;
                        right: 4px;
                        top: 6px;
                    }
                }
                :first-child {
                    margin-top: 0px;
                }
            }
        }
    }
}
</style>
